<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-09 22:03:44
-->
<template>
    <!-- 播放栏中部 -->
    <div style="width: 440px;">
        <!-- 音频标签 -->
        <audio
            ref="audio"
            :src="playStore.url"
            :volume="playStore.volume"
            @timeupdate="timeupdate"
            @ended="playNextMusic"
        />
        <!-- 播放控制 -->
        <div class="container flex-col-e-c text-main-text-color">
            <!-- 上层菜单 -->
            <div class="w-64 control flex-b-c">
                <div class="hover:text-theme-color" @click="changePlayMode">
                    <SvgIcon :name="playModeIcon" />
                </div>
                <div class="hover:text-theme-color" @click="playLastMusic">
                    <SvgIcon name="play-last-icon" size="20" />
                </div>
                <div class="menuItem" @click="changePlayState">
                    <div class="w-8 h-8 rounded-full flex-c-c bg-active-bg-color trans">
                        <SvgIcon name="pause-icon" size="26" v-show="playStore.isPlaying" />
                        <SvgIcon
                            name="play-icon"
                            size="26"
                            v-show="!playStore.isPlaying"
                            style="transform: translateX(2px);"
                        />
                    </div>
                </div>
                <div class="hover:text-theme-color" @click="playNextMusic">
                    <SvgIcon name="play-next-icon" size="20" />
                </div>
                <div class="hover:text-theme-color text-13 trans" @click="toggleShowLyric">词</div>
            </div>
            <!-- 下层播放进度 -->
            <div class="progress">
                <span class="justify-end pr-1 time">{{ playTime }}</span>
                <a-slider
                    v-model:value="progress"
                    :tooltipVisible="false"
                    @afterChange="changeProgress"
                />
                <span class="pl-1 time">{{ playStore.songTime.timeStr }}</span>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { usePlayStore } from '@/store/play'
import { playMode } from '@/types/store/playStoreType';
import { computed, onMounted, ref, watch } from 'vue';
import { getMusicUrl } from "@/service/api/song/song";
import Message from '../message/message';
import SvgIcon from '../svgIcon/svgIcon.vue';
import { throttle } from 'lodash'
import { useSong } from '@/hooks/song/useSong'
import { useDom } from '@/hooks/dom/useDom'
import { usePlay } from '@/hooks/play/usePlay'

const { playNextMusic, playLastMusic } = usePlay()
const playStore = usePlayStore()

const audio = ref(null as unknown as HTMLAudioElement)

// 监听播放状态变化
watch(() => playStore.isPlaying, newVal => {
    if (newVal) {
        return setTimeout(() => {
            audio.value.play()
        }, 150);
    }
    audio.value.pause()
})

watch(() => playStore.url, () => {
    audio.value.pause()
    setTimeout(() => {
        audio.value.play()
    }, 200);
})

// 由于一个音频链接有效时间不足半天，所以无法将链接存在本地，只能在启动软件时重新请求一次播放地址
onMounted(async () => {
    const id = playStore.songId
    if (id) {
        const url = (await getMusicUrl(id)).data[0].url;
        playStore.setUrl(url)
    }
})

// 播放模式与对应的icon映射
const playModeIconMap = new Map<playMode, string>([
    [playMode.单曲循环, 'loop-icon'],
    [playMode.随机播放, 'random-icon'],
    [playMode.顺序播放, 'order-icon']
])
// 当前播放模式对应的图标
const playModeIcon = computed(() => playModeIconMap.get(playStore.playMode) as string)

// 切换播放模式
const changePlayMode = () => {
    switch (playStore.playMode) {
        case playMode.单曲循环:
            playStore.setPlayMode(playMode.随机播放)
            break;
        case playMode.随机播放:
            playStore.setPlayMode(playMode.顺序播放)
            break;
        case playMode.顺序播放:
            playStore.setPlayMode(playMode.单曲循环)
            break;
    }
}

// 切换播放状态
const changePlayState = () => {
    playStore.toggleIsPlaying()
}

// 切换歌词显示
const toggleShowLyric = throttle(function () {
    Message.warning('暂未开发')
}, 4000)

// 播放进度
const progress = ref(0)
// 播放时间
const playTime = ref('00:00')

const { getSongTime } = useSong()
// 播放时间更新
const timeupdate = (e: Event) => {
    //@ts-ignore
    const currentTime = Number(e.target.currentTime.toFixed(2))
    playTime.value = getSongTime(currentTime * 1000)
    progress.value = currentTime / playStore.songTime.time * 100
    playStore.$patch({
        currentPlayTime: currentTime * 1000
    })
}

const { setAudioCurrent } = useDom()
// 手动变更播放进度
const changeProgress = (e: number) => {
    setAudioCurrent(audio.value, playStore.songTime.time * e / 100)
}
</script>

<style scoped lang='scss'>
.progress {
    @apply relative w-full h-5 flex items-center;
    .time {
        @apply flex items-center text-sub-text-color text-12;
        width: 43px;
    }
    .ant-slider {
        width: 354px;
        &:hover {
            &:deep(.ant-slider-handle) {
                visibility: visible !important;
            }
        }
        &:deep(.ant-slider-rail) {
            background-color: $main-border-color!important;
        }
        &:deep(.ant-slider-track) {
            background-color: $theme-color !important;
        }
        &:deep(.ant-slider-handle) {
            visibility: hidden;
            border-color: $theme-color !important;
        }
    }
}
</style>